<template>
  <!-- 群聊列表 -->
  <div class="group-list-item" :class="{'is-top': group ? group.isTop : false}">
    <div class="icon">
      <img :src="group.headUrl" alt />
      <div class="count" v-show="group.unread > 0">{{ group.unread }}</div>
    </div>
    <div class="info">
      <div class="title">{{ group.groupNick }}</div>
      <div class="content ellipsis">
        <span class="atted" v-if="group.atted">[有人@你]</span>
        {{ lastMessage }}</div>
    </div>
    <div class="desc">
      <div class="time">{{ group.LastMsgTime }}</div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import { forEach } from 'lodash';
import { Webim } from '@/utils/types';
declare const webim: Webim
@Component
export default class GroupListItem extends Vue {

  @Prop({})
  group: any;


  private extra = {
    lastMessage: '',
  };

  /**
   * 获取最后一条消息内容
   */
  private get lastMessage() {
    let LastMsg = this.group.LastMsg;
    let msg = '';
    if (LastMsg) {
      let nick = LastMsg.fromAccountNick;
      nick = nick.length > 8 ? nick.substring(0, 8) : nick;
      // TODO 解析消息 发送者名字 + 消息内容
      let lastMsg = this.convertMsg(LastMsg)
      if (lastMsg.isSystem) {
        msg += lastMsg.text;
      } else {
        msg += (nick + ': ');
        msg += lastMsg.text;
      }
      return msg;
    } else {
      return '';
    }
  }

  /**
   * 获取最后的消息时间
   */
  private get lastTime() {
    return '';
  }

  protected mounted() {
    // console.warn(this.group.groupNick, this.group);
  }

  private convertMsg(msg: any) {
    let text = '',
      elems,
      elem,
      type,
      content;
    elems = msg.elems; // 获取消息包含的元素数组
    let isSystem = false;
    forEach(elems, elem => {
      type = elem.type; // 获取元素类型
      content = elem.content; // 获取元素对象
      switch (type) {
        case webim.MSG_ELEMENT_TYPE.TEXT:
          text += content.text;
          break;
        case webim.MSG_ELEMENT_TYPE.FACE:
          text += content.data;
          break;
        case webim.MSG_ELEMENT_TYPE.IMAGE:
          text += '[图片]';
          break;
        case webim.MSG_ELEMENT_TYPE.SOUND:
          // this.convertSoundMsg(content, options);
          break;
        case webim.MSG_ELEMENT_TYPE.FILE:
          // this.convertTextMsg(content);
          break;
        case webim.MSG_ELEMENT_TYPE.LOCATION: //暂不支持地理位置
          //html += convertLocationMsgToHtml(content);
          break;
        case webim.MSG_ELEMENT_TYPE.CUSTOM:
          let desc = content.desc;
          let msgType = ''
          switch (desc) {
            case "message-sound": {
              // 转为语音播放
              msgType = '[语音消息]'
              break;
            }
            case "message-card": {
              // 转为分享卡片
              msgType = '[分享]'
              isSystem = true;
              break;
            }
            case "message-tip": {
              msgType = '[提示]'
              // 转为分享卡片
              isSystem = true;
              break;
            }
            case "message-battle": {
              // 转为战绩图片
              msgType = '[战绩]'
              break;
            }
            case "message-redpacket": {
              // 转为战绩图片
              msgType = '[蓝卡]'
              break;
            }
          }
          // 作为音频消息解读
          text += msgType;
          // this.convertTextMsg(content);
          break;
        case webim.MSG_ELEMENT_TYPE.GROUP_TIP:
          // this.convertTextMsg(content);
          text += '[提示]';
          isSystem = true;
          break;
        default:
          text += '[未知消息]';
          webim.Log.error("未知消息元素类型: elemType=" + type);
          break;
      }
    });
    return { text, isSystem };
  }
}
</script>

<style lang="stylus" scoped>
.atted
  color #f44334
</style>

